<template>
  <div class="read-more-body">
      <div class="read-more-center">
        <video id="mp4-vedio" controls   loop="loop">
            <source src="http://192.168.2.27:8888/assets/vedio/ford_recommend_video.mp4" type="video/mp4">
            您的浏览器不支持 video 标签。
        </video>
            <div class="close-div" @click="closeitem()" :class="{ isoutActive : isshow==true }">
            <span class="close-span">
                <img src="http://192.168.2.27:8888/assets/img/return.png" alt="">
            </span>
                
            </div>
      </div>
  </div>
</template>

<script>
export default {
    methods: {
        closeitem() {
            document.getElementById('mp4-vedio').pause();
            this.$emit("closeitem")
        },
        closegoout() {
            // alert(123)
            this.isshow = true
        },
        closegoin() {
            this.isshow = false 
        }
    },
    data() {
        return {
            isshow: true
        }
    }
}
</script>

<style lang="scss" scoped>
.read-more-body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,.7);
}
.read-more-center {
    width: 80%;
    height: 600px;
    margin: 3% auto 0;
    // background-color: yellow;
    position: relative;
    background-color: rgba(0,0,0,.9);
}
.close-div {
    position: absolute;
    box-sizing: border-box;
    // right: 0;
    // top: 1.8%;
    width: 100%;
    top: 0;
    left: 0;
    color: white;
    
    height: 50px;
    background: rgba(0,0,0,.8);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center top;
    transition: .3s linear;
    // display: none;
}
.close-span {
    float: right;
    margin-right: 1.5%;
    padding-top: 15px;
    // background-color: red;
    width: 50px;
    height: 50px;
}
img {
    width: 50%;
    height: 50%;
    // position: absolute;
    // vertical-align: middle;
    // justify-content: center;
    // align-items: center;
    // right: 50%;
    // top: 10%;
    // right:50%;
    // transform: translateY(50%);
    // transform: translateX(50%);
    // vertical-align: middle;
    // margin: 0 auto;
    // justify-content: center;
    // align-items: center;
    // background-color: red;
}
#mp4-vedio {
    width: 100%;
    height: 100%;
}
// #mp4-vedio:hover .close-span {
//     background-color: red;
// }
.isoutActive {
    // background-color: green;
    display: block;
    opacity: 1;
    transform: scaleY(1);
}
</style>